<!--下载器数据统计 数据总览 -->
<template>
<div  v-loading="loading" element-loading-text="拼命加载中">
    <div class="block">
    <span class="demonstration">时间选择: &nbsp;</span>
    <el-date-picker size="small" v-model="TimeSpace" type="daterange" align="right" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
    </el-date-picker>
    <span class="demonstration">统计方式: &nbsp;</span>
    <el-radio-group v-model="radio">
        <el-radio :label="1">PV</el-radio>
        <el-radio :label="2">UV</el-radio>
        <el-radio :label="3">IP</el-radio>
        <el-radio :label="4">UV+PPID</el-radio>
        <el-radio :label="5">IP+APPID</el-radio>
    </el-radio-group>
    <el-checkbox v-model="checked">云控</el-checkbox>
    <div id="searchButton">
        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
        <el-button type="primary" size="small" @click="OutputExcel">导出excel</el-button>
    </div>
    </div>
    <div class="block" style="margin-top:15px;">
    <el-table id="DataTable" :data="tableData" border style="margin:10px 0px 10px 0px;">
        <el-table-column prop="date" label="时间"></el-table-column>
        <el-table-column prop="showNum" label="展现数"></el-table-column>
        <el-table-column prop="clickNum" label="点击数"></el-table-column>
        <el-table-column prop="clickRate" label="点击率(%)"></el-table-column>
        <el-table-column prop="distributionsNum" label="分发数"></el-table-column>
        <el-table-column prop="distributionsRate" label="分发率(%)"></el-table-column>
        <el-table-column prop="openNum" label="打开数"></el-table-column>
        <el-table-column prop="openRate" label="打开率(%)"></el-table-column>
        <el-table-column prop="setupNum" label="安装数"></el-table-column>
        <el-table-column prop="setupRate" label="安装率(%)"></el-table-column>
        <el-table-column prop="totalRate" label="整体转化率(%)"></el-table-column>
    </el-table>
    <el-pagination id="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :pagem-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    </div>
</div>
</template>

<script>
export default {
    data() {
        let showDate = new Date();
        let seperator = '-';
        let year = showDate.getFullYear();
        let month = showDate.getMonth() + 1;
        let day = showDate.getDate();
        var strDate = showDate.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator + month + seperator + strDate;
        return {
            getDataByDataScreenURL: '' + this.$store.state.domain + '/bzDCP/data/screening',
            baseExcelURL: '' + this.$store.state.domain + '/bzDCP/data/screeningExport',
            TimeSpace: [currentdate, currentdate],
            radio: 1,
            checked: true,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            loading: true,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

        };
    },
    created() {
        this.getData();
    },
    methods: {
        getDateSearch(response) {
            let initialData = response.data.result;
            this.tableData = initialData;
            this.total = response.data.total;
        },
        getData() {
            this.loading = false;
            this.$ajax.post(this.getDataByDataScreenURL, this.qs.stringify({
                radio: this.radio,
                check: this.checked,
                timeSpace: JSON.stringify(this.TimeSpace)
            })).then(response => {
                if (response.status == 200) {
                    this.getDateSearch(response);
                } else {
                    this.$message.warning("网络错误！");
                    return;
                }
            });
        },
        OutputExcel() {
            let baseurl = this.baseExcelURL;
            let timeSpace = this.TimeSpace ? `["${this.TimeSpace[0]}","${this.TimeSpace[1]}"]` : '';
            let Optionurl = `?timeSpace=${timeSpace}&check=${this.checked}&radio=${this.radio}`;
            window.open(baseurl + Optionurl)
        },
        search() {
            if (this.TimeSpace == "") {
                this.$message.warning("查询条件不能为空！");
                return;
            } else {
                this.loading = true;
                this.currentPage=1;
                this.$ajax.post(this.getDataByDataScreenURL, this.qs.stringify({
                    timeSpace: JSON.stringify(this.TimeSpace),
                    radio: this.radio,
                    check: this.checked,
                    currentPage: 1,
                    pageSize: this.pageSize,
                })).then(response => {
                    if (response.status == 200) {
                        this.getDateSearch(response)
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;

                }).catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
            }
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            this.loading = true;
            this.$ajax.post(this.getDataByDataScreenURL,
                    this.qs.stringify({
                        timeSpace: JSON.stringify(this.TimeSpace),
                        radio: this.radio,
                        check: this.checked,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }),
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDateSearch(response)
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        },
        handleSizeChange: function (pageSize) {
            this.pageSize = pageSize;
            this.currentPage = 1;
            this.loading = true;
            this.$ajax.post(this.getDataByDataScreenURL,
                    this.qs.stringify({
                        timeSpace: JSON.stringify(this.TimeSpace),
                        radio: this.radio,
                        check: this.checked,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }),
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDateSearch(response)
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        }
    }
}
</script>

<style scoped>
#DataTable {
    margin-top: 25px;
}

#searchButton {
    margin-top: 10px;
}
.block{
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    padding: 12px;
}
</style>
